<template>
  <div class="fa-sign-img" :class="[`sign-type-${type}`, data.className]">
    <div v-lazy:background-image="data.img" class="fa-sign-img__target"></div>
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SignData, SignType } from '@/types'

export default defineComponent({
  name: 'FaSignImg',
  props: {
    /** 类型 */
    type: {
      type: String as PropType<SignType>,
      default: () => SignType.SEAL
    },

    /** 印章数据 */
    data: {
      type: Object as PropType<SignData>,
      default: () =>
        ({
          img: ''
        } as SignData)
    }
  }
})
</script>

<style lang="scss">
.fa-sign-img {
  position: relative;

  &__target {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    &.is-gray {
      opacity: 0.8;
      filter: grayscale(1);
    }
  }
}
</style>
